
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识setup</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    /*
   * 响应式数据
     * 1、ref 与 reactive 区别
     * 【定义数据】：
     *  1）ref定义的是基本类型的数据（备注：也可以定义对象，但是他的内部使用的还是reactive)
     *  2）reactive定义的是对象（或数组）类型；
     * 【原理】
     *  1）ref函数其实底层使用的是数据劫持实现数据响应；
     *  2）reactive 底层是通过 reflect 实现的。
     * 【使用】
     *  1）ref定义的响应式数据通过 data.value 访问，如果是基本类型，在html代码中使用插值语法是不需要写.value；
     *  2）reactive 不需要使用.value，直接通过 对象.属性 访问，例如：job.type、job.salary
     * 
     * 2、toRefs（响应式数据解构-对象）
     *  当响应式数据类型式对象时，我们想直接访问对象中的属性，就可以使用 toRefs 函数进行封装。
    */
    const {ref,reactive,toRefs} = Vue
    const app = Vue.createApp({
        template: `
            <div>
                <h1>我的信息</h1>
                <h2>姓名：andy</h2>
                <h2>性别：sex</h2>
                <h2>年龄：age</h2>
                <button @click="changeInfo" > 修改信息</button>
            </div>
        `,
// let name = 'andy'; 这个是普通数据，不是响应式数据：
//响应式数据：  let name =ref('andy');
       setup(props){
           let name =ref('andy');
           let age = ref(25);
           let job = reactive({type: '前端工程师', salary:'30k'})

           let {type,salary} = toRefs(job);
           setTimeout(() => {
               //job.value.type = 'UI设计师';
               //job.value.salary = '60k'
               //readonlyJob.
               job.type = 'UI设计师'
               job.salary = '60k'
               console.log(job)
           },2000);
           return {name,age,job,type,salary}
       }
    })

    const vm = app.mount("#app")
</script>
</html>